<template>
  <div class="scroll_box"> 
    <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">
      <div class="item_list" v-for="value in motto" v-bind:style="{'width': value.imgStyle.width}">
        <img :src="value.imgSrc" class="scrollImg" v-bind:style="{ 'height':value.imgStyle.height, 'width': value.imgStyle.width,}" />
        <div class="scrollText" v-show="value.content1 == ''? false : true">{{value.content1}}</div>
        <div class="scrollDesign" v-show="value.content2 == ''? false : true">{{value.content2}}</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
 props:['motto'],
  data () {
    return {
    }
  },
  created () {
   
  },
  computed:{

  }
}
</script>

<style scoped>
.scroll_box{width: 100%;overflow: hidden;white-space: nowrap;margin-top: 20px;padding-bottom: 10px;}
.item_list{width: 145px;display: inline-block;margin-right: 8px;margin-left: 7px}
.scrollImg{width: 145px;height: 125px;}
.scrollText{width: 110px;height: 30px;line-height: 30px;text-align: center;font-size: 11px;}
.scrollDesign{width: 110px;height: 20px;line-height: 20px;text-align: center;font-size: 14px;}
</style>
